<template>
  <card>
    <template v-slot:header>
      <UserTool v-slot:header :is-add="true" :is-edit="false" @Add="openAddDialog" />
    </template>
    <UserSearch />
    <!-- 表格table -->
    <div class="user-table">
      <el-table
        ref="table"
        :key="tableKey"
        v-loading="listLoading"
        :header-cell-style="{background:'#F5F4F7'}"
        :data="list"
        border
        fit
        stripe
        highlight-current-row
        :height="tableHeight"
        style="width: 100%;"
        :default-sort="{prop: 'id', order: 'ascending'}"
      >
        <el-table-column label="序号" prop="id" sortable align="center" width="80">
          <template slot-scope="scope">
            <span>{{ scope.row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column label="用户编码" prop="userid" sortable width="110px" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.userid }}</span>
          </template>
        </el-table-column>
        <el-table-column label="用户名" min-width="100px">
          <template slot-scope="scope">
            <span>{{ scope.row.username }}</span>
          </template>
        </el-table-column>
        <el-table-column label="拼音简拼" width="90px" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.jp }}</span>
          </template>
        </el-table-column>
        <el-table-column label="角色" width="110px" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.role }}</span>
          </template>
        </el-table-column>
        <el-table-column label="职员" width="110px" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.duty }}</span>
          </template>
        </el-table-column>
        <el-table-column label="所属科室" width="110px" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.department }}</span>
          </template>
        </el-table-column>
        <el-table-column label="用户描述" width="150px" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.remark }}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
          <template slot-scope="{row}">
            <el-button type="text" @click="handleUpdate(row)">编辑</el-button>
            <el-button type="text" class="del" @click="handleModifyStatus(row,'deleted')">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" />
    </div>
    <!-- 弹出新增层 -->
    <el-dialog
      title="添加用户"
      :visible.sync="dialogVisible"
      width="710px"
      :before-close="handleClose"
    >

      <el-form :inline="true" :model="form" :rules="rules">
        <el-form-item label="用户编码" :label-width="formLabelWidth" prop="userid">
          <el-input v-model="form.userid" class="el-form--widthLarge" autocomplete="off" />
        </el-form-item>
        <el-form-item label="用户名" :label-width="formLabelWidth" prop="username">
          <el-input v-model="form.username" class="el-form--widthLarge" autocomplete="off" />
        </el-form-item>
        <el-form-item label="拼音简拼" :label-width="formLabelWidth" prop="jp">
          <el-input v-model="form.jp" class="el-form--widthLarge" autocomplete="off" />
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth" prop="password">
          <el-input v-model="form.password" class="el-form--widthLarge" type="password" autocomplete="off" />
        </el-form-item>
        <el-form-item label="角色" :label-width="formLabelWidth" prop="role">
          <el-select v-model="form.role" class="el-form--widthLarge" placeholder="请选择角色">
            <el-option label="角色1" value="shanghai" />
            <el-option label="角色2" value="beijing" />
          </el-select>
        </el-form-item>
        <el-form-item label="职员" :label-width="formLabelWidth" prop="duty">
          <el-select v-model="form.duty" class="el-form--widthLarge" placeholder="请选择职员">
            <el-option label="职员1" value="shanghai" />
            <el-option label="职员2" value="beijing" />
          </el-select>
        </el-form-item>
        <el-form-item label="所属科室" :label-width="formLabelWidth" prop="department">
          <el-select v-model="form.department" class="el-form--widthLarge" placeholder="请选择科室">
            <el-option label="科室1" value="shanghai" />
            <el-option label="科室2" value="beijing" />
          </el-select>
        </el-form-item>
        <el-form-item label="是否封存" :label-width="formLabelWidth">
          <el-radio v-model="form.isSeal" label="1">否</el-radio>
          <el-radio v-model="form.isSeal" label="2">是</el-radio>
        </el-form-item>
        <el-form-item label="描述" :label-width="formLabelWidth">
          <el-input
            v-model="form.remark"
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4}"
            placeholder="请输入描述..."
            :style="{'width':'573px'}"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>

  </card>
</template>
<script>
import UserTool from '@/components/UserTools/UserTool'
import UserSearch from './components/UserSearch'
import Pagination from '@/components/Pagination'
import CalculateTableHeightP from '@/layout/mixin/calculateTableHeightP'
let initNum = 1
const randomNum = () => {
  return initNum++
}
const userData = []
for (var i = 0; i < 10; i++) {
  userData.push({ id: randomNum(), userid: randomNum() * 1000, username: '张三', role: '管理员', duty: '主任', jp: 'ZR', department: '内科', remark: '这个人是内科主任' })
}
export default {
  name: 'User',
  components: { UserTool, UserSearch, Pagination },
  mixins: [CalculateTableHeightP],
  data() {
    return {
      tableKey: 0,
      list: userData,
      total: 100,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20,
        importance: undefined,
        title: undefined,
        type: undefined,
        sort: '+id'
      },
      dialogVisible: false,
      form: {
        userid: '',
        username: '',
        jp: '',
        password: '',
        role: '',
        duty: [],
        department: '',
        isSeal: '1',
        remark: ''
      },
      formLabelWidth: '80px',
      rules: {
        userid: [
          { required: true, message: '请输入用户编号', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        username: [
          { required: true, message: '请输入用户名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        jp: [
          { required: true, message: '请输入拼音简拼', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入用户密码', trigger: 'blur' }
        ],
        role: [
          { required: true, message: '请选择角色', trigger: 'blur' }
        ],
        duty: [
          { required: true, message: '请选择职员', trigger: 'blur' }
        ],
        department: [
          { required: true, message: '请选择科室', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.listLoading = false
  },
  methods: {
    openAddDialog() {
      this.dialogVisible = true
    },
    handleClose() {
      this.dialogVisible = false
    }
  }
}
</script>
<style scoped>
 .del{
 margin-left:20px
 }
</style>

